<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
    html,body{
        height: 100%;
    }
    #wrap{
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
               flex-flow: column;
    }
    
    #main{
        -webkit-box-flex: 1; 
        -webkit-flex: 1;
        flex: 1;
    }
    .search-input {
        height: 1.6rem;
        line-height: 1.6rem;
        background: #f5f5f5;
        border-radius: 30px;
        position: relative;
        font-family:"aui_iconfont" !important;
        text-align: left;
        padding-left: 1.5rem;
        color: #999999;
    }
    .search-input:after {
        position: absolute;
        left: 0;
        padding-left: 0.5rem;
        content: "\e615";
    }
    
    #footers{
        padding-top:0;
    }
    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">文档</div>
    </header>
    <div id="main">
            
    </div>
    <div id="footer">
        <footer class="aui-bar aui-bar-tab" id="footers">
            <div class="aui-bar-tab-item aui-padded-l-15 aui-padded-r-15" tapmode style="width: auto;">
                <div class="search-input aui-font-size-14" onclick="funOpenWin(this)" data-name="edit-frm">请输入评论内容</div>
            </div>
            <!-- <div class="aui-bar-tab-item" tapmode style="width: 2.2rem;" >
                <div id="badge_id"></div>
                <i class="aui-iconfont aui-icon-comment"></i>
            </div> -->
            <div class="aui-bar-tab-item" tapmode style="width: 2.2rem;" id="collect_div" >
                <i id="collect_id" class="aui-iconfont aui-icon-star" onclick="collectFile()"></i>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript">
    apiready = function(){
        //适配iOS 7+，Android 4.4+状态栏
        $api.fixStatusBar(header);
        openFrame('file_detail');
        var username = $api.getStorage('username');
        // 判断收藏状态
        api.ajax({
            url : ServeUrl+'m=File&a=collectStatus',
            method : 'POST',
            cache : false,
            timeout : 30,
            dataType : 'json',
            data : {
                values : {
                    id: api.pageParam.id,
                    username: username
                }
            }
        },function(ret,err){
            if(ret){
                // alert(JSON.stringify(ret))
                if(ret.status==1){
                    var html = '<i id="collect_id" onclick="cancelCollect()" class="aui-active aui-iconfont aui-icon-star"></i>';
                    //$('#collect_id').addClass('aui-active');
                    document.getElementById('collect_div').innerHTML = html; 
                }
            }
            
        });

    };

    function openFrame(name) {
        var header = $api.byId('header');
        var headerPos = $api.offset(header);
        var footer    = $api.byId('footers');
        var footerPos = $api.offset(footer);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);
        api.openFrame({
            name: name,
            url: name+'_frm.html',
            pageParam: {
                id : api.pageParam.id
            },
            rect: {
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: api.frameHeight-headerPos.h -footerPos.h
            }
        });
    }

    // 打开win
    function openWin(name) {
        api.openWin({
            name: name,
            url: name+'_win.html',
        });
    }
    function backIndex() {
        api.openWin({
            name: 'root',
        });
    }
    function closeWin () {
        api.closeWin();
    }

    //收藏
    function collectFile(){
        //$api.setStorage('collectStatus',1);
        // var username = $api.getStorage('user_id');
        var username = $api.getStorage('username');
        
        if(username){
            var url = ServeUrl+"m=File&a=collectFile";
            api.ajax({
                url : url,
                method : 'POST',
                cache : false,
                timeout : 30,
                dataType : 'json',
                data : {
                    values : {
                        id: api.pageParam.id,
                        username: username
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    if(ret.status==1){
                        var html = '<i id="collect_id" onclick="cancelCollect()" class="aui-active aui-iconfont aui-icon-star"></i>';
                        //$('#collect_id').addClass('aui-active');
                        document.getElementById('collect_div').innerHTML = html;
                        api.toast({
                            msg:'收藏成功'
                        }); 
                    }
                }
            });
        }else{
            api.toast({
                msg:'请先登陆~'
            });
        }
    }

    // 取消收藏
    function cancelCollect(){
        //$api.setStorage('collectStatus',1);
        var username = $api.getStorage('username');
        var url = ServeUrl+"m=File&a=cancelCollect";
        api.ajax({
            url : url,
            method : 'POST',
            cache : false,
            timeout : 30,
            dataType : 'json',
            data : {
                values : {
                    id: api.pageParam.id,
                    username: username
                }
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status==1){
                    var html = '<i id="collect_id" onclick="collectFile()" class="aui-iconfont aui-icon-star"></i>';
                    //$('#collect_id').addClass('aui-active');
                    document.getElementById('collect_div').innerHTML = html;
                    api.toast({
                        msg:'取消收藏'
                    }); 
                }
                    
            }
        });
    }

    //弹出评论框架
    function funOpenWin( tag ){
        var name = tag.getAttribute('data-name');
        $api.setStorage( 'backFrame' , name );  //设置需要关闭的frame
        api.openFrame({
            name: name,
            url : 'openWin.html',
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.winHeight
            },
            pageParam:{
                id : api.pageParam.id,
            }
        });
    };
</script>
</html>